<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>常见问题</title>
    <link rel="stylesheet" href="__CSS__/supplies/bootstrap.min.css" />
    <link rel="stylesheet" href="__CSS__/supplies/common.css" />
    <link rel="stylesheet" href="__JS__/supplies/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="__JS__/supplies/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="__ASSETS__/css/font-awesome.min.css" />
    <link rel="stylesheet" href="__ASSETS__/css/cyrillic.css" />
    <link rel="stylesheet" href="__ASSETS__/css/ace-rtl.min.css" />
    <link rel="stylesheet" href="__ASSETS__/css/ace-skins.min.css" />

</head>
<style>
    body{
        height: 100% ;
        overflow: hidden;
        margin: 0;
        padding: 0;
        font-family: "微软雅黑";
        background-color: white;
    }
    .form-title {
        height: 40px;
        text-align: right;
    }
    .checkHead table .form-value input{
        height: 34px;
        width: 200px;
    }
    .form-title1 {
        height: 40px;
        width: 100px;
        text-align: right;
    }
    #record-table tr td {
        vertical-align: inherit;
    !important;
    }
    #record-table tr td p{
        font-size: 14px;
    }
    .delete_a{
        cursor: pointer;
    }
    .bootstrap-table{
        height:100% !important;
    }
    .fixed-table-container{
        height:calc(100% - 115px) !important;
    }
    .save_btn{
        background: #62a8d1;
        border: 1px solid #62a8d1;
    }
    .save_btn:hover{
        background: #62a8d1;
        border: 1px solid #62a8d1;
    }
    .checkHead-table .form-value input{
        border-radius: 0;
    }
</style>
<body>
<div id="content">
    <!--搜索-->
    <div class="checkHead form-inline" id="checkHead" style="padding-top: 10px;height: 50px;position: relative" >
        <button class="btn btn-default form-group save_btn" v-on:click = "add" style="">
            <i class="icon-plus align-top bigger-125"></i>
            添加
        </button>
        <table class="checkHead-table form-group" style="margin-left: calc(100% - 535px)">
            <tr>
                <td class="form-title">
                    问题名称：
                </td>
                <td class="form-value">
                    <input v-model="qname" type="text" class="search" placeholder="请输入问题名称" />&nbsp;&nbsp;&nbsp;&nbsp;
                </td>
                <td>
                    <button class="btn btn-default" v-on:click ="searchs">
                        <i class="icon-refresh align-top bigger-125"></i>
                        查询
                    </button>
                    <button class="btn btn-default" v-on:click = "reset">
                        <i class="icon-reply align-top bigger-125"></i>
                        重置
                    </button>
                </td>
            </tr>
        </table>
    </div>
    <!-- 查看问题详情 -->
    <div class="modal fade" id="problemModal" tabindex="-1" role="dialog" aria-labelledby="problemModalLabel"
         aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog" style="width: 1000px;height: 800px;">
            <div class="modal-content" style="width: 100%;height: 100%;">
                <div class="modal-header" style="width: 100%;height: 50px;">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="problemModalLabel">添加常见问题：</h4>
                </div>
                <div class="modal-body" style="overflow: auto;width: 100%;height: 685px;">
                    <table class="checkHead-table">
                        <tr>
                            <td class="form-title1">
                                问题名称：
                            </td>
                            <td>
                                <input v-model="result_data.name" type="text" style="width: 200px;" class="search form-control" />
                            </td>
                            <td class="form-title1">
                                问题英文名称：
                            </td>
                            <td>
                                <input v-model="result_data.name_english" type="text" style="width: 200px;" class="search form-control" />
                            </td>
                        </tr>
                        <tr>
                            <td class="form-title1">
                                问题类型：
                            </td>
                            <td >
                                <select style="width: 200px;height: 34px;" name="type" v-model="type_id">
                                    <option v-for="key in type_data" :value='key.id'>{{key.name}}</option>
                                </select>
                            </td>
                            <td class="form-title1">
                                状态：
                            </td>
                            <td>
                                <input name="ins_status" type="radio" value="1" checked>显示
                                <input name="ins_status" type="radio" value="0" >隐藏
                            </td>
                        </tr>
                        <tr>
                            <td class="form-title1">
                                解答：
                            </td>
                            <td colspan="3">
                                <div id="editor" type="text/plain" style="height:500px;width: 100%"></div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer" style="width: 100%;height: 65px;">
                    <button type="button" class="btn btn-default" data-dismiss="modal" v-on:click="addInfo()">
                        保存
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" >
                        取消
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!--添加问题 -->
    <div class="modal fade" id="saveModal" tabindex="-1" role="dialog" aria-labelledby="saveModalLabel"
         aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog" style="width: 1000px;height: 800px;">
            <div class="modal-content" style="width: 100%;height: 100%;">
                <div class="modal-header" style="width: 100%;height: 50px;">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="saveModalLabel">常见问题详情：</h4>
                </div>
                <div class="modal-body" style="overflow: auto;width: 100%;height: 685px;">
                    <table class="checkHead-table">
                        <tr>
                            <td class="form-title1">
                                问题名称：
                            </td>
                            <td>
                                <input v-model="json_data.name" type="text" style="width: 200px;" class="search form-control" />
                            </td>
                            <td class="form-title1">
                                问题英文名称：
                            </td>
                            <td>
                                <input v-model="json_data.name_english" type="text" style="width: 200px;" class="search form-control" />
                            </td>
                        </tr>
                        <tr>
                            <td class="form-title1">
                                问题类型：
                            </td>
                            <td >
                                <select style="width: 200px;height: 34px;" name="type" v-model="type_id">
                                    <option v-for="key in type_data" :value='key.id'>{{key.name}}</option>
                                </select>
                            </td>
                            <td class="form-title1">
                                状态：
                            </td>
                            <td v-if="json_data.status == 1">
                                <input name="status" type="radio" value="1" checked>显示
                                <input name="status" type="radio" value="0" >隐藏
                            </td>
                            <td v-else>
                                <input name="status" type="radio" value="1">显示
                                <input name="status" type="radio" value="0" checked >隐藏
                            </td>
                        </tr>
                        <tr>
                            <td class="form-title1">
                                解答：
                            </td>
                            <td colspan="3">
                                <div id="editorSave" type="text/plain" style="height:500px;width: 100%"></div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer" style="width: 100%;height: 65px;">
                    <button type="button" class="btn btn-default" data-dismiss="modal" v-on:click="saveInfo">
                        保存
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" >
                        取消
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="table-responsive" style="background:white;margin-top: 0px;height: 100%;">
    <table class="table" id="record-table"></table>
</div>
</body>
<script rel="script" src="__JS__/supplies/jquery.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap-table/bootstrap-table.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script rel="script" src="__JS__/supplies/common.js"></script>
<script rel="script" src="__JS__/supplies/vue.min.js"></script>
<script type="text/javascript" charset="utf-8" src="__JS__/UEditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="__JS__/UEditor/ueditor.all.js"> </script>
<script rel="script" src="__JS__/vue-resource.js"></script>
<script type="text/javascript" charset="utf-8" src="__JS__/supplies/layer/layer.js"></script>
<script>

    var ue = UE.getEditor('editor', {
        elementPathEnabled: false, //删除元素路径
        wordCount: false,    //删除字数统计
    });
    var ues = UE.getEditor('editorSave', {
        elementPathEnabled: false, //删除元素路径
        wordCount: false,    //删除字数统计
    });


    var qname;
    var tableheight = document.documentElement.clientHeight - 150;
    $('#record-table').bootstrapTableEx({
        height: tableheight,
        url: '{:url("admin/Sundry/getFaqList")}',
        columns: [
            {
                checkbox: true
            }, {
                field: 'id',
                align: 'left',
                title: '序号'
            }, {
                field: 'name',
                align: 'left',
                title: '问题名称'
            },{
                field: 'answer',
                align: 'left',
                title: '解答'
            },
            {
                field: 'type',
                align: 'center',
                title: '问题类型'
            },{
                field: 'status',
                align: 'center',
                title: '状态'
            }, {
                field: 'create_time',
                align: 'center',
                title: '时间'
            }, {
                title: '操作',
                align: 'center',
                width: 260,
                formatter: operateFormatter
            }
        ],
        queryParams: function (params) {
            var param = {
                name:qname,
                pageSize: params.pageSize,
                pageNumber: params.pageNumber
            };
            return param;
        },
        responseHandler: function (res) {
            if (res.data) {
                return {
                    rows: res.data,
                    total: res.count
                };
            }
        }
    });

    var vm = new Vue({
        el:"#content",
        data:{
            qname:"",
            json_data : {},
            type_data : {},
            type_id : '',
            id : '',
            result_data : {}
        },
        created : function () {
            var url = "{:url('admin/Sundry/getproblemType')}";
            this.$http.post(url).then(function (data) {
                this.type_data = data.body.data;
            })
        },
        methods:{
            searchs:function(){
                qname = vm.qname;
                $( "#record-table" ).bootstrapTable( 'refresh' );
            },
            reset:function(){
                vm.qname = "";
            },
            faqDetails : function (id) {
                var url = "{:url('admin/Sundry/getFaqInfo')}";
                this.$http.post(url,{
                    id:id
                }).then(function (data) {
                    this.type_id = data.body.data.type_id;
                    this.json_data = data.body.data;
                    ues.setContent(data.body.data.answer);
                })
            },
            add:function () {
                $("#problemModal").modal({
                    keyboard:true
                });
            },
//            save:function(){
//                $("#saveModal").modal({
//                    keyboard:true
//                });
//            },
            addInfo: function () {
                var url = "{:url('admin/Sundry/addProblemInfo')}";
                this.$http.post(url,{
                    name : this.result_data.name,
                    name_english : this.result_data.name_english,
                    answer : UE.getEditor('editor').getContent(),
                    type_id : this.type_id,
                    status : $('input[name=ins_status]:checked').val(),
                }).then(function (data) {
                    layer.confirm(data.body.msg, {
                        time: 20000, //20s后自动关闭
                        btn: ['关闭']
                    },function () {
                        location.reload();
                    });
                })
            },
            saveInfo : function () {
                var url = "{:url('admin/Sundry/saveProblemInfo')}";
                this.$http.post(url,{
                    id:this.id,
                    name:this.json_data.name,
                    name_english:this.json_data.name_english,
                    answer:UE.getEditor('editorSave').getContent(),
                    type_id:this.type_id,
                    status:$('input[name=status]:checked').val(),
                }).then(function (data) {
                    layer.confirm(data.body.msg, {
                        time: 20000, //20s后自动关闭
                        btn: ['关闭']
                    },function () {
                        location.reload();
                    });
                })
            },
            delProblem:function (id) {
                layer.config({
                    skin:"my_skin"
                })
                layer.confirm('您确定要删除吗？', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    var url = "{:url('admin/Sundry/delProblem')}";
                    vm.$http.post(url,{
                        id:id
                    }).then(function (data) {
                        layer.confirm(data.body.msg, {
                            time: 20000, //20s后自动关闭
                            btn: ['关闭']
                        },function () {
                            location.reload();
                        });
                    });
                });
            }
        }
    })

    // 详情按钮
    function operateFormatter(val, row, index) {

        var divStr = "<div class='form-inline'>"
        var detailStr = "<a href='javascript:void(0);' class='delete_a' onclick='faqDetails(1," + row.id + ")'>查看详情</a>&nbsp;&nbsp;"+
            "<a href='javascript:void(0);' class='delete_a' onclick='delProblemByid(1," + row.id + ")'>删除</a>";
        divStr += detailStr;
        divStr += "</div>";
        return divStr;
    }

    function faqDetails(index , id) {
       $("#saveModal").modal({
           keyboard:true
       });
       vm.faqDetails(id);
       vm.id = id;
    }
    
    function delProblemByid(index , id) {
        vm.delProblem(id);
    }
</script>
</html>